<!--  -->
<template>
  <div >
    <!-- 1 -->
      <div class="citylist" ref="wrapper">
          <div>
              <div class="list_title" >
              <span class="s1">境内</span>
              <span>境外,港澳台</span>
          </div>
          <div class="hotcity">
              <div class="hotcity_title">
                  <h2> 
                      热门城市
                  </h2>
              </div>
              <ul class="hotcity_list" >
                  <li @click="changecity(item.name)" v-for="(item,index) in hotcity" :key="index"  >
                     
                      <a href="#">{{item.name}}</a>
                  </li>
              </ul>
          </div>
          <!-- 2 -->
          <div class="hotcity">
              <div class="hotcity_title">
                  <h2>
                      字母排序
                  </h2>
              </div>
              <ul class="hotcity_list">
                  <li v-for="(item,key,idx) in cities" :key="idx" @click="movername(idx)">
                      <a href="#">{{key}}</a>
                  </li>
              </ul>
          </div>

          <!-- 3 -->
          <div class="hotcity"  v-for="(item, index) in cities" :key="index" ref="index">
              <div class="hotcity_title">
                  <h2>
                      {{index}}
                  </h2>
              </div>
              <ul class="hotcity_list">
                  <li v-for="(item, idx) in item" :key="idx"  @click="changecity(item.name)">
                      <a href="#">{{item.name}}</a>
                  </li>
              </ul>
          </div>
          </div>
      </div>
      
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      hotcity: "",
      cities: "",
      scroll: ""
    };
  },
  methods: {
    // 动态生成城市
    changecity(itemName) {
      // alert(itemName) 点击的哪个值
      this.$router.push("/");
      this.changeName(itemName);
    },
    ...mapMutations(["changeName"]),

    // 字母排序
    movername(idx){
      this.scroll.scrollToElement(this.$refs.index[idx])// 列表里面的A,B,C 跟下面标题的A,B,C 相对应的
    }
  },
  mounted() {
    // console.log(this.$refs.wrapper); // 获取dom 节点
    this.scroll = new BScroll(this.$refs.wrapper, {
      click: true
    });//better-scroll
    this.$http.get("/api/city.json").then(res => {
      let data = res.data.data;
      this.hotcity = res.data.data.hotCities;
      this.cities = res.data.data.cities;
      console.log(res.data.data.cities);
    });
  }
};
</script>
<style scoped lang="scss">
.citylist {
  width: 100%;
  height: 100%;
  position: absolute;
  .list_title {
    width: 100%;
    height: 1.0666666rem;
    background: #00bcd4;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      width: 30%;
      font-size: 0.37777777rem;
      border: solid 1px #ffff;
      color: #ffff;
      padding: 3px;
      text-align: center;
    }
    .s1 {
      background: #fff;
      color: #00bcd4;
    }
  }
  .hotcity {
    width: 100%;
    height: auto;
    .hotcity_title {
      width: 100%;
      height: 1.06666666rem;
      line-height: 1.06666666rem;
      background: #f5f5f5;
      h2 {
        font-size: 0.34rem;
        margin-left: 0.3rem;
        font-weight: normal;
      }
    }
    .hotcity_list ::before {
      content: "";
      position: absolute;
      width: 33.3333%;
      left: 33.3333%;
      height: 100%;
      border-left: 0.01rem solid #ddd;
      border-right: 0.01rem solid #ddd;
      z-index: -1;
    }
    .hotcity_list {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      overflow: hidden;
      li {
        width: 33.3333333333%;
        height: 1.2rem;
        line-height: 1.2rem;
        text-align: center;
        border-bottom: solid 0.01rem #ddd;
        a {
          text-decoration: none;
          color: #000;
          font-size: 0.37rem;
        }
      }
    }
  }
}
</style>
    